<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport"
          content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>聊天</title>
    <link rel="stylesheet" href="layui/css/layui.mobile.css" media="all"/>
    <link rel="stylesheet" href="layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="js/message.js"></script>
    <script type="text/javascript" src="js/messagebody.js"></script>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <style>
        .layui-table thead {
            position: fixed;
            width: 100%;
        }

        .layui-table thead tr th {
            width: 33.33%;
            text-align: center;
            border: none;
        }

        .layui-table tbody tr td {
            width: 33.33%;
            text-align: center;
        }

        .layui-table td {
            text-overflow: ellipsis;
        }

        .layui-table thead th {
            background-color: rgba(255, 255, 255, 0.22) !important;
            color: #343434 !important;
            /*text-shadow: 0.05em 0.05em 0.2em #999998 !important;*/
        }

        .friends-list {
            background-color: #009688;
            color: #fff
        }
    </style>
</head>
<body>
<script src="layui/layui.js"></script>
<script src="js/websocketconfig.js"></script>
<script>

    Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    var doctorId = $.cookie("doctorId");
    var memberCode = $.cookie("memberCode");
    var doctorToken = $.cookie("doctorToken");
    var areaCode;

    var goodsList = [];
    var friendsList = [];


    function add2List(goodDom) {
        if ($(goodDom).css("color") == "rgb(102, 102, 102)") {
            $(goodDom).css("background-color", "#009688");
            $(goodDom).css("color", "#fff");
            goodsList.push($(goodDom).attr("id"))
        } else {
            $(goodDom).css("background-color", "#fff");
            $(goodDom).css("color", "rgb(102, 102, 102)");
            goodsList.remove($(goodDom).attr("id"))
        }
        console.log(goodsList);

        if (goodsList.length == 0) {
            $("#table_body").height($(window).height() - 52 - 39 - 41 - 41);
            $("#goodsNameInput").css("bottom", "41px");
            $("#selectGoods").css("bottom", "0px");
            $("#confirmGoods").hide();
        } else {
            $("#table_body").height($(window).height() - 52 - 39 - 41 - 41 - 41);
            $("#goodsNameInput").css("bottom", "82px");
            $("#selectGoods").css("bottom", "41px");
            $("#confirmGoods").show();
        }
    }

    function getShopUserInfo() {
        $.ajax({
            type: "GET",
            dataType: "JSON",
            async: false,
            url: "http://" + window.location.host + "/javashop/core/organization/orgUser/currentsd.do?userNumber=" + memberCode,
            success: function (data) {
                if (data.userInfo.uiNickname == null) {
                    history.go(-1);
                }
                console.log("ok");
                areaCode = data.areaNumber;
                $("#account").val(memberCode);
                $("#password").val('000000');
                $("#un").val(data.userInfo.uiNickname);
                $("#ud").val('5');
                $.ajax({
                    type: "post",
                    url: "/im/useraccount/save",
                    data: {
                        "account": memberCode,
                        "password": "000000",
                        "userInfo.name": data.userInfo.uiNickname,
                        "userInfo.deptid": "5"
                    },
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log("ok");
                    }
                });
            },
            error: function (a, b, c) {
                console.log("error");
                console.log(a);
                console.log(b);
                console.log(c);
                // history.go(-1);
            }
        });
    }

    var msgs = null;
    var lm = null;

    layui.config({
        version: true
    }).use(['jquery', 'mobile'], function () {
        var mobile = layui.mobile
            , layim = mobile.layim
            , $ = layui.jquery
            , laytpl = layui.laytpl
            , layer = mobile.layer;
        var currentsession = "${sessionScope.user.id}";
        data = null;

        //发送消息
        var sendMsg = function (msg, receiver, group) {
            var message = new proto.Model();
            var content = new proto.MessageBody();
            message.setMsgtype(4);
            message.setCmd(5);
            message.setGroupid(group);//系统用户组
            message.setToken(currentsession);
            message.setSender(currentsession);
            message.setReceiver(receiver);//好友ID
            content.setContent(msg);
            content.setType(0);
            message.setContent(content.serializeBinary());
            socket.send(message.serializeBinary());
        };

        //拉取离线消息
        var showOfflineMsg = function (layim) {
            $.ajax({
                type: "post",
                url: "getofflinemsg",
                async: true,
                success: function (data) {
                    var dataObj = eval("(" + data + ")");
                    if (dataObj != null && dataObj.length > 0) {
                        for (var i = 0; i < dataObj.length; i++) {
                            layim.getMessage({
                                username: dataObj[i].sendusername
                                , avatar: dataObj[i].avatar + "?" + new Date().getTime()
                                , id: dataObj[i].senduser
                                , type: "friend"
                                , content: dataObj[i].content
                                , timestamp: dataObj[i].createdate
                            });
                        }
                    }
                }
            });
        }


        $.get('getusers', function (str) {
            var json = eval("(" + str + ")")
            data = json.data;
            //基础配置
            layim.config({
                init: data,
                title: "我的交流平台"
                , notice: true
                //获取群员接口（返回的数据格式见下文）
                , members: {
                    url: '' //接口地址（返回的数据格式见下文）
                    , type: 'get' //默认get，一般可不填
                    , data: {} //额外参数
                },
                uploadImage: {
                    url: 'imgupload' //接口地址
                    , type: 'post' //默认post
                },
                //上传文件接口（返回的数据格式见下文）
                uploadFile: {
                    url: 'fileupload' //接口地址
                    , type: 'post' //默认post
                },
                tool: [{
                    alias: 'audio' //工具别名
                    , title: '发送语音' //工具名称
                    , iconUnicode: '&#xe688;' //图标字体的unicode，可不填
                    , iconClass: '' //图标字体的class类名
                }],
                brief: false,
                min: true,
                isNewFriend: false,
                isgroup: false,
                voice: true,
                copyright: true,
                msgbox: 'message',//消息盒子页面地址，若不开启，剔除该项即可
                //,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                chatLog: 'historymessage',//聊天记录页面地址，若不开启，剔除该项即可
                moreList:
                    [
                        {
                            alias: 'goodsList'
                            , title: '商品列表'
                            , iconUnicode: ''
                        },
                        {
                            alias: 'back'
                            , title: '退出咨询频道'
                            , iconUnicode: '&#xe606;'
                        }
                    ]

            });

        });

        layim.on('moreList', function (obj) {

            switch (obj.alias) { //alias即为上述配置对应的alias

                case 'back': //发现
                    if (memberCode.length == 20) {
                        window.location.href = ("http://" + window.location.host + "/javashop/index.html");
                    } else {
                        window.location.href = ("http://" + window.location.host + "/javashop/sales.html");
                    }

                    break;

                case 'goodsList':
                    if (memberCode.length != 20) {
                        goodsList = [];
                        $.ajax({
                            type: "POST",
                            url: "http://" + window.location.host + "/javashop/core/organization/orgUser/txGoodsList.do",
                            async: true,
                            data: {
                                "patientCode": areaCode,
                                "goodsName": ""
                            },
                            success: function (res) {
                                console.log(res);
                                var tableText = "";
                                for (var i = 0; i < res.data.list.length; i++) {
                                    var goods = res.data.list[i];
                                    tableText += '<tr id="' + goods.goods_id + '" onclick="add2List(this)" style="height: 59px;"><td>' + goods.goods_name + '</td><td>' + goods.price + '</td><td>' + goods.sn + '</td></tr>';
                                }

                                var htmlText =
                                    '<table id="goods_table" class="layui-table" style="margin: 0px;table-layout: fixed">' +
                                    '<colgroup>' +
                                    '<col width="40%">' +
                                    '<col width="25%">' +
                                    '<col>' +
                                    '</colgroup>' +
                                    '<thead>' +
                                    '<tr style="height: 39px;width: 100%;display: inline-table;">' +
                                    '<th style="">商品名称</th>' +
                                    '<th style="">商品价格</th>' +
                                    '<th style="">商品货号</th>' +
                                    '</tr>' +
                                    '</thead>' +
                                    '<tbody id="table_body" style="margin-top: 39px;position: absolute;overflow: auto;background: #fff">' +
                                    tableText +
                                    '</tbody>' +
                                    '</table>' +
                                    '<input id="goodsNameInput" style="bottom: 41px;position: fixed;border: none;width: 100%;box-sizing: border-box;border-radius: 0px;height: 41px;text-align: center;padding: 0px;" id="goods-name" type="text" name="title" autocomplete="off" placeholder="名称" class="layui-input">' +
                                    '<button id="selectGoods" class="layui-btn layui-btn-fluid" style="position: fixed;bottom: 0px;border-radius: 0px;height: 41px;line-height: 5%">筛选</button>' +
                                    '<button id="confirmGoods" class="layui-btn layui-btn-fluid layui-btn-warm" style="position: fixed;bottom: 0px;border-radius: 0px;height: 41px;line-height: 5%;display: none;margin-left: 0px;">确认</button>';
                                ;

                                layim.panel({
                                    title: '商品列表' //标题
                                    , tpl: htmlText //模版
                                    // , data: { //数据
                                    //     test: '123'
                                    // }
                                });

                                $("#table_body").height($(window).height() - 52 - 39 - 41 - 41);

                                $("#selectGoods").click(function () {
                                    $.ajax({
                                        type: "POST",
                                        url: "http://" + window.location.host + "/javashop/core/organization/orgUser/txGoodsList.do",
                                        async: true,
                                        data: {
                                            "patientCode": areaCode,
                                            "goodsName": $("#goodsNameInput").val()
                                        },
                                        success: function (res) {
                                            console.log(res);
                                            var tableTextTemp = "";
                                            for (var i = 0; i < res.data.list.length; i++) {
                                                var goods = res.data.list[i];
                                                tableTextTemp += '<tr id="' + goods.goods_id + '" onclick="add2List(this)" style="height: 59px;"><td>' + goods.goods_name + '</td><td>' + goods.price + '</td><td>' + goods.sn + '</td></tr>';
                                            }
                                            $("#table_body").height($(window).height() - 52 - 39 - 41 - 41);
                                            $("#table_body").empty().append(tableTextTemp);
                                        },
                                        error: function (error) {
                                            var errors = JSON.parse(error.responseText);
                                            console.log(errors);
                                            errors = errors.error_message.replace(":", "");
                                            console.log(errors);
                                        }
                                    });
                                })
                                $("#confirmGoods").click(function () {
                                    friendsList = [];
                                    var userListHtml = '<ul class="layui-layim-list layui-show confirm-list">' + $(".layui-layim-list:eq(1)").html() +
                                        '</ul>' +
                                        '<button id="confirmFriends" class="layui-btn layui-btn-fluid layui-btn-warm" style="position: fixed;bottom: 0px;border-radius: 0px;height: 41px;line-height: 5%;display: none;margin-left: 0px;">确认</button>';
                                    console.log(layim.cache());
                                    layim.panel({
                                        title: '选择用户' //标题
                                        , tpl: userListHtml //模版
                                        // , data: { //数据
                                        //     test: '123'
                                        // }
                                    });
                                    $(".confirm-list li").each(function () {
                                        $(this).removeAttr('layim-event');
                                    })
                                    $(".confirm-list li").click(function () {
                                        $(this).toggleClass('friends-list');
                                        var id = $(this).attr('class').substring(12, $(this).attr('class').indexOf(' '));

                                        if (friendsList.indexOf(id) > -1) {
                                            friendsList.remove(id);
                                        } else {
                                            friendsList.push(id);
                                        }
                                        if (friendsList.length > 0) {
                                            $("#confirmFriends").show();
                                        } else {
                                            $("#confirmFriends").hide();
                                        }
                                    })

                                    $("#confirmFriends").click(function () {
                                        if ($.trim(currentsession) == '') {
                                            return;
                                        }
                                        if (!window.WebSocket) {
                                            return;
                                        }
                                        if (socket.readyState == WebSocket.OPEN) {
                                            //判断是发送好友消息还是群消息
                                            for (var i = 0; i < goodsList.length; i++) {
                                                var message = "http://" + window.location.host + "/javashop/goods-" + goodsList[i] + ".html";
                                                for (var j = 0; j < friendsList.length; j++) {
                                                    sendMsg(message, friendsList[j] + "", null)
                                                }
                                            }

                                        }
                                        /* layer.msg('正在推送中，成功后会自动跳转。', {
                                            icon: 1,
                                            time: 1000
                                        }, function () {
                                            window.location.reload();
                                        });
                                         */
                                        layer.msg('正在推送中，成功后会自动跳转', {icon: 1, time: 1500})
                                        setTimeout(function () {
                                            location.reload();
                                        }, 1600);


                                    })
                                })

                            },
                            error: function (error) {
                                var errors = JSON.parse(error.responseText);
                                console.log(errors);
                                errors = errors.error_message.replace(":", "");
                                console.log(errors);
                            }
                        });
                    }else{
                        layer.msg("(◕ᴗ◕✿)");
                    }

                    break;
            }
        });


        layim.on('tool(audio)', function (insert, send, obj) { //事件中的tool为固定字符，而code则为过滤器，对应的是工具别名（alias）
            layer.prompt({
                title: '发送语音'
                , formType: 2
                , shade: 0
            }, function (text, index) {
                layer.close(index);
                insert(text); //将内容插入到编辑器，主要由insert完成
                //send(); //自动发送
                console.log(this); //获取当前工具的DOM对象
                console.log(obj); //获得当前会话窗口的DOM对象、基础信息
            });
        });

        //查看聊天信息
        layim.on('detail', function (data) {
            //console.log(data); //获取当前会话对象
            layim.panel({
                title: data.name + ' 聊天信息' //标题
                ,
                tpl: '<div style="padding: 10px;">自定义模版，<a href="http://www.layui.com/doc/modules/layim_mobile.html#ondetail" target="_blank">参考文档</a></div>' //模版
                ,
                data: { //数据
                    test: '么么哒'
                }
            });
        });


        //监听查看更多记录
        layim.on('chatlog', function (data, ul) {
            $.post('historymessageajax', {id: data.id, pageSize: 2000}, function (str) {
                var json = eval("(" + str + ")")
                result = json.data;
                var insertData = {list: result, id: data.id}
                var template = '<div class="layui-unselect layim-content" style=""><div class="layim-chat layim-chat-friend"><div class="layim-chat-main" style="height:98%"><ul> '
                    + '{{#  layui.each(d.list, function(index, item){ }}<li class="layim-chat-li {{#  if(d.id === item.senduser){ }}layim-chat-mine {{#  } }} "><div class="layim-chat-user"><img src="{{ item.avatar}}"><cite>{{ item.sendusername}}</cite></div>'
                    + '<div class="layim-chat-text">{{item.content}}</div></li>{{#  }); }}</ul></div></div></div>'

                var temphtml = "";
                laytpl(template).render(insertData, function (html) {
                    temphtml = html;
                });
                layim.panel({
                    title: '与 ' + data.name + ' 的聊天记录' //标题
                    , tpl: temphtml//模版
                    , data: { //数据
                        list: result,
                        id: data.id
                    }
                });
            })
        });


        layim.on('ready', function (res) {
            lm = mobile.layim;
            //添加客服
            // lm.addList({
            //     type: 'friend' //列表类型，只支持friend和group两种
            //     , avatar: "layui/images/0.jpg" //好友头像
            //     , username: '琪琪IM智能客服' //好友昵称
            //     , groupid: 1 //所在的分组id
            //     , id: "0" //好友id
            //     , sign: "有什么问题尽管问我把" //好友签名
            // });

            //取得离线消息

            showOfflineMsg(layim);

            getShopUserInfo();


        });
        //监听发送消息
        layim.on('sendMessage', function (data) {
            var To = data.to;
            var my = data.mine;
            var message = my.content;
            var receiver = To.id + "";
            if ($.trim(currentsession) == '') {
                return;
            }
            if ($.trim(message) == '') {
                layer.msg("请输入要发送的消息!");
                return;
            }
            if (!window.WebSocket) {
                return;
            }
            if (socket.readyState == WebSocket.OPEN) {
                //判断是发送好友消息还是群消息
                if (To.type == "friend") {
                    sendMsg(message, receiver, null)
                } else {
                    sendMsg(message, null, receiver)
                }
            }
        });

        layim.on('online', function (status) {
            //console.log(status); //获得online或者hide
            /*  var stateVal = "";
            if(status=="hide"){
                stateVal ="hide";
            }
            $.get("/user/onlinestate",{ state: stateVal }); */
        });

        var initEventHandle = function () {
            //收到消息后
            socket.onmessage = function (event) {
                if (event.data instanceof ArrayBuffer) {
                    var msg = proto.Model.deserializeBinary(event.data);      //如果后端发送的是二进制帧（protobuf）会收到前面定义的类型
                    var msgCon = proto.MessageBody.deserializeBinary(msg.getContent());
                    var cache = layim.cache();
                    var username = "", avatar = "", friend = false;
                    layui.each(cache.friend, function (index1, item1) {
                        layui.each(item1.list, function (index, item) {
                            if (item.id == msg.getSender()) {
                                username = item.username;
                                avatar = item.avatar;
                                return friend = true;
                            }
                        });
                        if (friend) return true;
                    });

                    //心跳消息
                    if (msg.getCmd() == 2) {
                        //发送心跳回应
                        var message1 = new proto.Model();
                        message1.setCmd(2);
                        message1.setMsgtype(4);
                        socket.send(message1.serializeBinary());
                    } else if (msg.getCmd() == 3) {
                        //上线
                        if (msg.getSender() != currentsession) {
                            // layer.msg(username + "上线了！");
                            layim.setFriendStatus(msg.getSender(), 'online');
                        }
                    } else if (msg.getCmd() == 4) {
                        //下线
                        if (msg.getSender() != currentsession) {
                            // layer.msg(username + "已下线！");
                            layim.setFriendStatus(msg.getSender(), 'offline');
                        }
                    } else {
                        //显示非自身消息
                        if (msg.getSender() != currentsession) {
                            var time = (new Date(msg.getTimestamp())).getTime();
                            //不显示用户组消息
                            if (msg.getGroupid() == null || msg.getGroupid().length < 1) {
                                lm.getMessage({
                                    username: username
                                    , avatar: avatar + "?" + new Date().getTime()
                                    , id: msg.getSender()
                                    , type: "friend"
                                    , content: msgCon.getContent()
                                    , timestamp: time
                                });
                            } else {
                                lm.getMessage({
                                    username: username
                                    , avatar: avatar + "?" + new Date().getTime()
                                    , id: msg.getGroupid()
                                    , type: "group"
                                    , content: msgCon.getContent()
                                    , timestamp: time
                                });
                            }
                        }
                    }
                } else {
                    var data = event.data;                //后端返回的是文本帧时触发
                }
            };
            //连接后
            socket.onopen = function (event) {
                var message = new proto.Model();
                var browser = BrowserUtil.info();
                message.setVersion("1.0");
                message.setDeviceid("")
                message.setCmd(1);
                message.setSender(currentsession);
                message.setMsgtype(1);
                message.setFlag(1);
                message.setPlatform(browser.name);
                message.setPlatformversion(browser.version);
                message.setToken(currentsession);
                var bytes = message.serializeBinary();
                socket.send(bytes);
            };
            //连接关闭
            socket.onclose = function (event) {
                layim.setFriendStatus(currentsession, 'offline');
                layer.open({
                    content: '您已下线，重新上线?'
                    , btn: ['确定', '取消']
                    , yes: function (index) {
                        reconnect(websocketurl, initEventHandle);
                        layim.setFriendStatus(currentsession, 'oline');
                        layer.close(index);
                        showOfflineMsg(layim)
                    }
                });

            };
            socket.onerror = function () {
                reconnect(websocketurl, initEventHandle);
                showOfflineMsg(layim)
            };
        }
        createWebSocket(websocketurl, initEventHandle);

    })
    ;


</script>
</body>
</html>